<template>
    <view class="note-page">
        <!-- 头部区域 -->
        <page-header class="header" title="我的留言" @heightChange="handleHeaderHeightChange">
        </page-header>

        <!-- 内容区域 -->
        <view class="content">
            <!-- 留言列表 -->
            <view class="note-list">
                <view class="note-item" v-for="(item, index) in noteList" :key="index"
                    @click="handleNoteItemClick(item)">
                    <view class="note-header">
                        <text class="title">{{ item.title }}</text>
                        <text class="time">{{ item.createTime }}</text>
                    </view>
                    <view class="note-content">
                        <text class="content">{{ item.content }}</text>
                        <view class="image-list" v-if="item.images && item.images.length > 0">
                            <image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img" mode="aspectFill"
                                @click.stop="handleImagePreview(item.images, imgIndex)" />
                        </view>

                        <!-- 回复内容 -->
                        <view class="reply-content" v-if="item.reply">
                            <view class="reply-header">
                                <uni-icons type="chat" size="14" color="#007AFF"></uni-icons>
                                <text class="reply-label">官方回复</text>
                                <text class="reply-time">{{ item.reply.replyTime }}</text>
                            </view>
                            <text class="reply-text">{{ item.reply.content }}</text>
                        </view>

                        <!-- 未回复提示 -->
                        <view class="no-reply" v-else-if="item.status === 'pending'">
                            <uni-icons type="clock" size="14" color="#ff9800"></uni-icons>
                            <text class="no-reply-text">等待回复中...</text>
                        </view>
                    </view>
                    <view class="note-footer">
                        <view class="status-info">
                            <view class="type-tag" :style="{ backgroundColor: getTypeColor(item.type) }">
                                {{ getTypeLabel(item.type) }}
                            </view>
                            <view class="status-tag" :class="getStatusClass(item.status)">
                                {{ getStatusLabel(item.status) }}
                            </view>
                        </view>
                        <view class="reply-info">
                            <view class="reply-count" v-if="item.replyCount > 0">
                                <uni-icons type="chat" size="14" color="#999"></uni-icons>
                                <text>{{ item.replyCount }}条回复</text>
                            </view>
                            <view class="last-reply" v-if="item.lastReplyTime">
                                <text>{{ item.lastReplyTime }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 加载更多 -->
            <view class="load-more" v-if="hasMore">
                <text v-if="isLoading">加载中...</text>
                <text v-else @click="handleLoadMoreButtonClick">点击加载更多</text>
            </view>
            <view class="no-more" v-else>
                <text>没有更多了</text>
            </view>

            <!-- 悬浮按钮 -->
            <view class="float-btn" @click="handleToSubmitPageButtonClick">
                <uni-icons type="plus" size="24" color="#ffffff"></uni-icons>
            </view>
        </view>

        <!-- 加载框 -->
        <uni-popup ref="loadingPopup" type="center" :mask-click="false">
            <view class="loading-content">
                <image class="loading-image" src="/static/logo.png" mode="aspectFit" />
                <view class="loading-text">{{ loadingText }}</view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { defineComponent, ref, reactive, onMounted, onUnmounted } from 'vue';
import PageHeader from '@/components/PageHeader.vue';

export default defineComponent({
    name: 'NoteList',
    components: {
        PageHeader
    },
    setup() {
        // ===== 变量声明 =====
        const isLoading = ref(false);
        const loadingText = ref('加载中...');
        const hasMore = ref(true);
        const page = ref(1);
        const pageSize = ref(10);
        const loadingPopup = ref(null);

        // 头部高度相关
        const headerHeight = ref(0);
        const statusBarHeight = ref(20);
        const navBarHeight = ref(44);

        // 个人留言列表数据
        const noteList = ref([
            {
                id: 1,
                username: '我',
                avatar: '/static/example.png',
                title: '关于系统功能的建议',
                content: '希望可以增加更多的互动功能，让用户之间的交流更加便捷。建议增加投票功能，让用户能够参与决策。',
                type: 'feature',
                createTime: '2024-03-20 14:30',
                images: ['/static/example.png'],
                isLiked: false,
                likeCount: 12,
                isAnonymous: false,
                status: 'pending', // pending-待回复, replied-已回复, closed-已关闭
                replyCount: 0,
                lastReplyTime: null,
                reply: null
            },
            {
                id: 2,
                username: '我',
                avatar: '/static/example.png',
                title: '系统使用体验反馈',
                content: '整体使用体验不错，但有时候加载速度较慢，希望能优化一下。特别是在网络较慢的情况下。',
                type: 'experience',
                createTime: '2024-03-19 16:45',
                images: [],
                isLiked: true,
                likeCount: 8,
                isAnonymous: true,
                status: 'replied',
                replyCount: 1,
                lastReplyTime: '2024-03-20 10:30',
                reply: {
                    content: '感谢您的反馈，我们已经在优化系统性能，预计下个版本会有明显改善。',
                    replyTime: '2024-03-20 10:30',
                    replier: '系统管理员'
                }
            },
            {
                id: 3,
                username: '我',
                avatar: '/static/example.png',
                title: '页面显示异常',
                content: '在个人中心页面，头像显示有问题，有时候会显示默认头像而不是用户上传的头像。',
                type: 'bug',
                createTime: '2024-03-18 09:15',
                images: ['/static/example.png', '/static/example.png'],
                isLiked: false,
                likeCount: 5,
                isAnonymous: false,
                status: 'closed',
                replyCount: 1,
                lastReplyTime: '2024-03-19 14:20',
                reply: {
                    content: '这个问题已经修复，请更新到最新版本。如果问题仍然存在，请提供更多详细信息。',
                    replyTime: '2024-03-19 14:20',
                    replier: '技术支持'
                }
            },
            {
                id: 4,
                username: '我',
                avatar: '/static/example.png',
                title: '希望增加夜间模式',
                content: '建议增加夜间模式功能，保护用户视力，特别是在晚上使用时更加舒适。',
                type: 'feature',
                createTime: '2024-03-17 20:30',
                images: [],
                isLiked: false,
                likeCount: 15,
                isAnonymous: false,
                status: 'pending',
                replyCount: 0,
                lastReplyTime: null,
                reply: null
            },
            {
                id: 5,
                username: '我',
                avatar: '/static/example.png',
                title: '其他建议',
                content: '希望可以增加更多的个性化设置选项，让用户能够根据自己的喜好来定制界面。',
                type: 'other',
                createTime: '2024-03-16 11:45',
                images: [],
                isLiked: true,
                likeCount: 3,
                isAnonymous: true,
                status: 'replied',
                replyCount: 1,
                lastReplyTime: '2024-03-17 16:00',
                reply: {
                    content: '您的建议很好，我们会在后续版本中考虑增加更多个性化选项。',
                    replyTime: '2024-03-17 16:00',
                    replier: '产品经理'
                }
            }
        ]);

        // ===== 计算属性 =====
        // 暂无

        // ===== 页面交互方法 =====
        // 头部高度变化处理
        const handleHeaderHeightChange = (heightInfo) => {
            statusBarHeight.value = heightInfo.statusBarHeight || 20;
            navBarHeight.value = heightInfo.navBarHeight || 44;
            headerHeight.value = heightInfo.totalHeaderHeight || (statusBarHeight.value + navBarHeight.value);

            console.log('头部高度更新:', heightInfo, '总高度px:', headerHeight.value);
        };

        // 留言项点击
        const handleNoteItemClick = (item) => {
            console.log('点击留言:', item);
            // 可以跳转到留言详情页
            // uni.navigateTo({
            //     url: `/pages/note/Detail?id=${item.id}`
            // });
        };

        // 图片预览
        const handleImagePreview = (images, current) => {
            uni.previewImage({
                urls: images,
                current: images[current]
            });
        };

        // 点赞按钮点击
        const handleLikeButtonClick = (item) => {
            item.isLiked = !item.isLiked;
            item.likeCount = item.isLiked ? (item.likeCount || 0) + 1 : (item.likeCount || 1) - 1;
            // 这里应该调用后端接口更新点赞状态
        };

        // 加载更多按钮点击
        const handleLoadMoreButtonClick = () => {
            if (!isLoading.value && hasMore.value) {
                loadMoreData();
            }
        };

        // 跳转到提交页面
        const handleToSubmitPageButtonClick = () => {
            uni.navigateTo({
                url: '/pages/NoteEdit',
                success: () => {
                    console.log('跳转到提交页面成功');
                },
                fail: (err) => {
                    console.error('跳转到提交页面失败:', err);
                }
            });
        };



        // ===== 其他方法 =====
        // 获取类型标签颜色
        const getTypeColor = (type) => {
            const colors = {
                feature: 'rgba(0, 122, 255, 0.1)',
                experience: 'rgba(76, 217, 100, 0.1)',
                bug: 'rgba(255, 59, 48, 0.1)',
                other: 'rgba(142, 142, 147, 0.1)'
            };
            return colors[type] || colors.other;
        };

        // 获取类型标签文本
        const getTypeLabel = (type) => {
            const labels = {
                feature: '功能建议',
                experience: '体验问题',
                bug: '程序故障',
                other: '其他反馈'
            };
            return labels[type] || labels.other;
        };

        // 获取状态标签样式
        const getStatusClass = (status) => {
            const classes = {
                pending: 'status-pending',
                replied: 'status-replied',
                closed: 'status-closed'
            };
            return classes[status] || 'status-pending';
        };

        // 获取状态标签文本
        const getStatusLabel = (status) => {
            const labels = {
                pending: '待回复',
                replied: '已回复',
                closed: '已关闭'
            };
            return labels[status] || '待回复';
        };

        // 加载更多数据
        const loadMoreData = () => {
            isLoading.value = true;
            loadingText.value = '加载更多...';
            loadingPopup.value.open();

            // 模拟加载延迟
            setTimeout(() => {
                // 这里应该调用后端接口获取数据
                const newData = [
                    {
                        id: 6,
                        username: '我',
                        avatar: '/static/example.png',
                        title: '新功能建议',
                        content: '建议增加夜间模式，保护用户视力。',
                        type: 'feature',
                        createTime: '2024-03-15 09:15',
                        images: [],
                        isLiked: false,
                        likeCount: 5,
                        isAnonymous: false,
                        status: 'pending',
                        replyCount: 0,
                        lastReplyTime: null
                    }
                ];

                noteList.value = [...noteList.value, ...newData];
                page.value++;
                hasMore.value = page.value < 3; // 模拟只有3页数据
                isLoading.value = false;
                loadingPopup.value.close();
            }, 1000);
        };

        // ===== 生命周期钩子 =====
        onMounted(() => {
            // 页面加载时显示加载框
            isLoading.value = true;
            loadingText.value = '加载留言数据...';
            loadingPopup.value.open();

            // 模拟加载延迟
            setTimeout(() => {
                isLoading.value = false;
                loadingPopup.value.close();
            }, 1000);
        });

        onUnmounted(() => {
            // 清理工作
        });

        return {
            // 变量
            isLoading,
            loadingText,
            hasMore,
            noteList,
            loadingPopup,
            headerHeight,
            statusBarHeight,
            navBarHeight,

            // 方法
            handleHeaderHeightChange,
            handleNoteItemClick,
            handleImagePreview,
            handleLikeButtonClick,
            handleLoadMoreButtonClick,
            handleToSubmitPageButtonClick,
            getTypeColor,
            getTypeLabel,
            getStatusClass,
            getStatusLabel
        };
    }
});
</script>

<style lang="less" scoped>
.note-page {
    width: 100vw;
    min-height: calc(100vh - v-bind('headerHeight + "px"'));
    background-color: #f5f5f5;
    padding-top: v-bind('headerHeight + "px"'); // 动态头部高度

    .header {
        width: 100%;
        background-color: #ffffff;
    }

    .content {
        padding: 20rpx;
        position: relative;

        .note-list {
            .note-item {
                background-color: #ffffff;
                border-radius: 12rpx;
                padding: 20rpx;
                margin-bottom: 20rpx;
                box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

                .note-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    margin-bottom: 16rpx;

                    .title {
                        font-size: 32rpx;
                        color: #333333;
                        font-weight: bold;
                        flex: 1;
                        margin-right: 16rpx;
                    }

                    .time {
                        font-size: 24rpx;
                        color: #999999;
                        white-space: nowrap;
                    }
                }

                .note-content {
                    .title {
                        font-size: 32rpx;
                        color: #333333;
                        font-weight: bold;
                        margin-bottom: 12rpx;
                        display: block;
                    }

                    .content {
                        font-size: 28rpx;
                        color: #666666;
                        line-height: 1.6;
                        margin-bottom: 16rpx;
                        display: block;
                        margin-top: 8rpx;
                    }

                    .image-list {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 12rpx;
                        margin-top: 12rpx;

                        image {
                            width: 200rpx;
                            height: 200rpx;
                            border-radius: 8rpx;
                            background-color: #f0f0f0;
                        }
                    }

                    .reply-content {
                        margin-top: 20rpx;
                        padding: 16rpx;
                        background-color: #f8f9fa;
                        border-radius: 8rpx;
                        border-left: 4rpx solid #007AFF;

                        .reply-header {
                            display: flex;
                            align-items: center;
                            gap: 8rpx;
                            margin-bottom: 12rpx;

                            .reply-label {
                                font-size: 24rpx;
                                color: #007AFF;
                                font-weight: 500;
                            }

                            .reply-time {
                                font-size: 22rpx;
                                color: #999999;
                                margin-left: auto;
                            }
                        }

                        .reply-text {
                            font-size: 26rpx;
                            color: #333333;
                            line-height: 1.5;
                        }
                    }

                    .no-reply {
                        display: flex;
                        align-items: center;
                        gap: 8rpx;
                        margin-top: 16rpx;
                        padding: 12rpx 16rpx;
                        background-color: rgba(255, 152, 0, 0.1);
                        border-radius: 8rpx;

                        .no-reply-text {
                            font-size: 24rpx;
                            color: #ff9800;
                        }
                    }
                }

                .note-footer {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 16rpx;
                    padding-top: 16rpx;
                    border-top: 1px solid #f0f0f0;

                    .status-info {
                        display: flex;
                        gap: 12rpx;

                        .type-tag {
                            padding: 4rpx 16rpx;
                            border-radius: 24rpx;
                            font-size: 24rpx;
                            color: #666666;
                        }

                        .status-tag {
                            padding: 4rpx 16rpx;
                            border-radius: 24rpx;
                            font-size: 24rpx;

                            &.status-pending {
                                background-color: rgba(255, 152, 0, 0.1);
                                color: #ff9800;
                            }

                            &.status-replied {
                                background-color: rgba(76, 175, 80, 0.1);
                                color: #4caf50;
                            }

                            &.status-closed {
                                background-color: rgba(158, 158, 158, 0.1);
                                color: #9e9e9e;
                            }
                        }
                    }

                    .reply-info {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        gap: 4rpx;

                        .reply-count {
                            display: flex;
                            align-items: center;
                            gap: 6rpx;

                            text {
                                font-size: 22rpx;
                                color: #999999;
                            }
                        }

                        .last-reply {
                            text {
                                font-size: 20rpx;
                                color: #bbbbbb;
                            }
                        }
                    }
                }
            }
        }

        .load-more,
        .no-more {
            text-align: center;
            padding: 20rpx 0;
            font-size: 24rpx;
            color: #999999;
        }

        .float-btn {
            position: fixed;
            right: 40rpx;
            bottom: 120rpx;
            width: 100rpx;
            height: 100rpx;
            background: linear-gradient(135deg, #007AFF 0%, #0056b3 100%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.3);
            transition: all 0.3s;

            &:active {
                transform: scale(0.95);
                box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.2);
            }
        }
    }

    // 加载框样式
    .loading-content {
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 16rpx;
        padding: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 200rpx;

        .loading-image {
            width: 100rpx;
            height: 100rpx;
            margin-bottom: 20rpx;
            animation: rotate 1s linear infinite;
        }

        .loading-text {
            color: #ffffff;
            font-size: 28rpx;
            text-align: center;
        }
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}
</style>